<template>
  <div id="graph">
    <h1>graph</h1>
  </div>
</template>

<script>
let myChartElement, myChart;
export default {
  name: "graph-ui",
  data() {
    return {
      loading: false,
      loadingTab: false,
      activeName: [1], // 默认打开第一个属性
      keyword: "", // 输入框捜索的内容
      entityList: [], // 知识实体列表
      docList: [], // 关联文档列表
      collapseData: [], // 属性列表
      DdrawNode: [], // 图谱的节点列表
      drawRela: [], // 图谱的关系列表
      fixedData: [], // 双击的图谱节点合集，用于固定位置
      drawSS: true, // 双击图谱节流
      leCard: "attribute",
      isSearch: false,
      tabShow: false,
      thumbsUpShow: false,
      thumbsOut: 0,
      drawDn: false,
      drawUp: false,
      drawDnTime: 0,
      drawUpTime: 0,
    };
  },
  created() {
    window.addEventListener("resize", this.scaleEchart, false);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.scaleEchart, false);
  },
  mounted() {
    myChartElement = document.getElementById("nlp-intelligent-atlas-tp");
    myChart = echarts.init(myChartElement, null, { renderer: "svg" });
    const that = this;
    myChart.on("mousedown", { dataType: "node" }, function (params) {
      if (that.drawSS) {
        if (that.drawDnTime) {
          clearTimeout(that.drawDnTime);
          that.drawDn = true;
          that.drawDnTime = setTimeout(() => {
            that.drawDn = false;
            that.drawDnTime = 0;
          }, 200);
        }
      } else {
        that.drawDn = true;
        that.drawDnTime = setTimeout(() => {
          that.drawDn = false;
          that.drawDnTime = 0;
        }, 200);
      }
      return;
    });
    // 拖动图谱节点使之位置固定;
    myChart.on("mouseup", { dataType: "node" }, function (params) {
      const option = myChart.get0ption();
      const _aa = option.series[0].data[params.dataIndex];
      const _bb = that.fixedData.find((m) => m.name == _aa.name);
      if (that.drawDn) {
        if (_bb) {
          myChart.setOption(option);
        }
        if (that.drawUp) {
          that.drawUp = false;
          that.drawDn = false;
          clearTimeout(that.drawUpTime);
          clearTimeout(that.drawDnTime);
          that.drawDnTime = 0;
          that.drawUpTime = 0;
          that.drawSS = false;
          setTimeout(() => {
            that.drawSS = true;
          }, 1000);
          // 双击
          that.getKbqaData("double", params.name);
        } else {
          that.drawUp = true;
          that.drawUpTime = setTimeout(() => {
            that.drawUp = false;
            that.drawDn = false;
            clearTimeout(that.drawDnTime);
            that.drawDnTime = 0;
            that.drawUpTime = 0;
            that.drawSS = false;
            setTimeout(() => {
              that.drawSS = true;
            }, 1000);
            //单击
            that.getKbqaData("single", params.name);
          }, 300);
        }
      } else {
        that.drawUp = false;
        clearTimeout(that.drawUpTime);
        that.drawUpTime = 0;
        that.drawSS = false;
        setTimeout(() => {
          that.drawSS = true;
        }, 1000);
        //移动

        _aa.x = params.event.offsetX;
        _aa.y = params.event.offsetY;
        _aa.fixed = true;
        myChart.setOption(option);
        // 拖动图谱节点后，需要更新双击后的节点位置
        if (that.fixedData.length) {
          if (_bb) {
            _bb.x = _aa.x;
            _bb.y = _aa.y;
          } else {
            that.fixedData.push(_aa);
          }
        } else {
          that.fixedData.push(_aa);
        }
      }
    });
    this.keyword = this.$route.query.wd?.trim() || this.query;
    this.getKeyWord(this.keyword);
  },

  methods: {
    getKeyWord(i) {
      const __width = myChartElement.clientWidth,
        _height = (myChartElement.clientHeight.this.loading = true);
      this.isSearch = !this.isSearch;
      this.keyword = [1];
      this.activeName;
      this.drawNode = [
        {
          name: "-1--",
          x: 0,
          y: 0,
          fixed: true,
          symbolSize: 0,
          label: {
            show: false,
          },
          tooltip: {
            show: false,
          },
        },
        {
          name: "-2--",
          x: 0,
          y: _height,
          fixed: true,
          symbolSize: 0,
          label: {
            show: false,
          },
          tooltip: { show: false },
        },
        {
          name: "-3--",
          x: __width,
          y: 0,
          fixed: true,
          symbolSize: 0,
          label: {
            show: false,
          },
          tooltip: { show: false },
        },
        {
          name: "-4--",
          x: __width,
          y: _height,
          fixed: true,
          symbolSize: 0,
          label: {
            show: false,
          },
          tooltip: { show: false },
        },
      ];
      this.drawRela = [];
      (this.fixedData = []), (this.entityList = []);
      this.docList = [];
      this.collapseData = [];
      this.getKbgaData();
    },
    getKbgaData(a, b) {
      let params;
      if (["single", "double"].includes(a)) {
        params = {
          query: "",
          node: b,
          type: a,
        };
      } else {
        params = {
          query: this.keyword,
          node: "",
          type: "subgraph",
        };
      }
      this.props
        .getKbqaSearch(params)
        .then((res) => {
          if (res.status == 200) {
            if (a == "single") {
              this.loadingTab = true;
              if (res.data?.single) {
                let _aa;
                if (Array.isArray(res.data.single)) {
                  _aa = res.data.single;
                } else {
                  _aa = JSON.parse(res.data.single.replaceAll(/'/g, ' "'));
                }
                if (Array.isArray(_aa) && _aa[0]?.hasOwnProperty("attr_key")) {
                  this.collapseData = _aa;
                } else {
                  this.collapseData = [];
                }
                this.toggleCard = "attribute";
                this.activeName = [1];
              }
            } else if (!a || a == "double") {
              this.toggleCard = "relevance";
              if (!a) {
                this.entityList = res.data.subgraph?.rec || [];
                this.docList = res.data.doc || [];
              } else {
                this.loadingTab = true;
              }
              const node = [];
              let _aa, _bb;
              if (res.data.subgraph) {
                //搜索的时候
                if (
                  Arary.isArray(res.data.subgraph?.node) &&
                  Array.isArray(res.data.subgraph?.relation)
                ) {
                  _aa = res.data.subgraph.nodes;
                  _bb = res.data.subgraph.relation;
                } else {
                  return;
                }
                if (!_aa.length) {
                  this.$message("暂未搜索到相关节点");
                  return;
                } else if (res.data.double) {
                  //双击图谱节点的时候，后台返回JSON格式的数据
                  let _double;
                  if (typeof res.data.double === "string") {
                    _double = JSON.parse(
                      res.data.double.replaceAll(/'/g, ' "')
                    );
                  } else {
                    _double = res.data.double;
                  }
                  if (
                    Array.isArray(_double.nodes) &&
                    Array.isArray(_double.relation)
                  ) {
                    _aa = _double.node;
                    _bb = _double.relation;
                  } else {
                    return;
                  }
                  if (!_aa.length) {
                    this.$message("暂未查询到相关节点");
                  }
                  if (!_bb.length) {
                    return;
                  }
                }
              }
              //图谱的节点名称不能重复
              if (_aa.length) {
                const _node = [],
                  _cc = this.drawNode.cocat(_aa);
                _cc.forEach((m, n, o) => {
                  if (o.findIndex((k) => k.name == m.name) == n) {
                    _node.push(m);
                  }
                });
                this.drawNode = _node;
              }
              //图谱的关系矢量最好也不重复
              if (_bb.length) {
                const _rela = [],
                  _dd = this.drawRela.concat(_bb);
                _dd.forEach((m, n, o) => {
                  if (
                    o.findIndex(
                      (k) => k.source == m.source && k.target == m.target
                    ) == n
                  ) {
                    _rela.push(m);
                  }
                });
                this.drawRela = _rela;
              }
              if (this.fixedData.length) {
                //使双击后的节点和拖动后的节点，位置固定
                this.drawNode.forEach((m) => {
                  const _ee = this.fixedData.find((k) => k.name == m.name);
                  if (_ee) {
                    m.x = _ee.x;
                    m.y = _ee.y;
                    m.fixed = true;
                  }
                });
              }
              this.$nextTick(() => {
                const updateOption = new Object();
                updateOption.data = this.drawNode;
                updateOption.links = this.drawRela;
                this.$emit("upDateGraphOption", updateOption);
                if (a == "double") {
                  myChart.setOption(this._props.graphOption);
                } else {
                  myChart.setOption(this._props.graphOption, true);
                }
              });
            }
          }
        })
        .catch((e) => {})
        .finally(() => {
          if (!a) {
            this.searchShow && this.mouseenterFN();
            this.tabShow = true;
          }
          setTimeout(() => {
            this.loading = false;
            this.loadingTab = false;
            this.mouseleaveFN();
          }, 200);
        });
    },
  },
};
</script>

<style scoped></style>
